<template>
    <div>
        <transition name="slide-fade">
            <div style="width:75%;margin:0 auto;margin-top:50px;">
                <el-row>
                    <el-col :span="6">

                        <el-row style="width:300px;">
                            <el-col :span="1">
                                <div class="set_rectangle"></div>
                            </el-col>
                            <el-col :span="23">
                                <p class="set_p_cn">每日一菜</p>
                                <p class="set_p_en">A daily food</p>
                            </el-col>
                        </el-row>

                        <Today></Today>

                    </el-col>
                    <el-col :span="18">
                        <el-row style="width:300px;margin-left:30px">
                            <el-col :span="1">
                                <div class="set_rectangle"></div>
                            </el-col>
                            <el-col :span="23">
                                <p class="set_p_cn">热门推荐</p>
                                <p class="set_p_en">Popular recommend</p>
                            </el-col>
                        </el-row>

                        <Popular style="margin-left:30px"></Popular>

                    </el-col>
                </el-row>
            </div>
        </transition>
        <div style="width:75%;margin:0 auto;margin-top:50px;">
            <el-row style="width:300px;">
                            <el-col :span="1">
                                <div class="set_rectangle"></div>
                            </el-col>
                            <el-col :span="23">
                                <p class="set_p_cn">优秀美食</p>
                                <p class="set_p_en">Good food</p>
                            </el-col>
                        </el-row>
            <RecordShow></RecordShow>
        </div>
    </div>
</template>

<script>
    import Today from './Today'
    import Popular from './Popular'
    import RecordShow from './RecordShow'

    import {getTodayDishes} from '@/api/dishesApi.js'

    export default {
        name: 'RecordMain',
        components: {
            Today,
            Popular,
            RecordShow
        },
        created(){
            getTodayDishes().then(resp=>{
                console.log(resp.data[0].dishes)
                this.$store.commit('setTodayDishes',resp.data[0].dishes)
            })
        }
    }
</script>

<style scoped>
    .set_p_cn {
        font-weight: 700;
        font-size: 18px;
        text-align: left;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 10px;
        color: rgb(31, 31, 31);
    }

    .set_p_en {
        font-family: "palatino linotype", palatino, serif;
        font-size: 15px;
        font-weight: 700;
        text-align: left;
        margin-top: 10px;
        margin-bottom: 0;
        margin-left: 10px;
        color: rgb(32, 32, 32);
    }

    .set_rectangle {
        width: 6px;
        height: 60px;
        background: rgb(27, 27, 27);
    }

    .slide-fade-enter-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter,
    .slide-fade-leave-to

    /* .slide-fade-leave-active for below version 2.1.8 */
        {
        transform: translateY(20px);
        opacity: 0;
    }
</style>